<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="canvas" height="600" width="1000">
        Your browser not support Canvas!
    </canvas>

    <script type="text/javascript">
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");

        function drawEllipse(x,y,w,h){
            var k = 0.55228475;
            var ox = (w/2)*k;
            var oy = (h/2)*k;
            var xe = x+w;
            var ye = y+h;
            var xm = x+w/2;
            var ym = y+h/2;

            ctx.beginPath();
            ctx.moveTo(x,ym);
            ctx.bezierCurveTo(x,ym-oy,xm-ox,y,xm,y);
            ctx.bezierCurveTo(xm+ox,y,xe,ym-oy,xe,ym);
            ctx.bezierCurveTo(xe,ym+oy,xm+ox,ye,xm,ye);
            ctx.bezierCurveTo(xm-ox,ye,x,ym+oy,x,ym);
            ctx.stroke();
        }

        function drawText(){

        }
//        for(var i=0;i<50;i++){
//            ctx.save();
//            ctx.translate(500,300);
//            ctx.scale(2,2);
//            ctx.rotate(Math.PI/20*i);
//            drawEllipse(-70,-100,140,200);
//            ctx.restore();
//        }
        var i=0;
        var M = 15;
        var s = setInterval(function (){
            ctx.save();
            ctx.translate(500,300);
            ctx.scale(2,2);
            ctx.rotate(Math.PI/M*i);
            drawEllipse(-70,-100,140,200);
            ctx.restore();
            i++;
            if(i>M){
                clearInterval(s);
            }
        },100);

    </script>
</body>
</html>